<template>
  <div class="add-video-con">
    <p class="margin-left-right-16 margin-bottom-10 margin-top-10">视频地址</p>
    <div class="display-video-con margin-left-right-16">
      <div class="btns-con">
        <el-button type="danger" size="small" class="btn-delete" @click.stop="onDelete" >
          <el-icon><i class="jy-icon-delete"></i></el-icon>
        </el-button>
      </div>
      <video-item :item="item" :compItem="compItem" :isRight="true" class="video-con"></video-item>
      <div class="mask"></div>
      <p class="info" @click.stop="onShowVideoPop">点击更换</p>
    </div>
    <!-- <input-normal v-model="item.url" label="外部视频链接" @change="onUpdateItem"></input-normal> -->
    <p class="margin-left-right-16 margin-top-10">视频封面</p>
    <add-img-con class="margin-left-right-16" btnLabel="修改封面" :url="item.poster" comAttr="commonAttr" picAttr="poster" :height="100" :isCrop='false' :index="index"></add-img-con>
    <input-normal label="封面地址" v-model="item.poster" @change="onUpdateItem"></input-normal>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import { MEDIAS } from '@/common/const'
import VideoItem from '@/components/items/video-item.vue'
import AddImgCon from '@/views/components/add-img-con.vue'
import InputNormal from '@/views/components/edit/InputNormal.vue'

export default {
  name: "AddVideoCon",
  components: {
    VideoItem,
    AddImgCon,
    InputNormal,
  },
  props: {
    btnLabel: {
      type: String,
      default: "修改视频",
    },
    item: {
      type: Object,
      default: null,
    },
    compItem: {
      type: Object,
      default: null,
    },
    index: {
      type: Number,
      default: -1
    },
    picAttr: {
      type: String,
      default: 'url'
    },
    comAttr:String,
    event: Object,
  },
  methods: {
    ...mapActions({
      setMediaPop: "setMediaPop",
      updateCurrentComponentData: "components/updateCurrentComponentData",
      updateComponentItem: "components/updateComponentItem"
    }),
    onUpdateItem(){
      if(this.index >= 0){
        let data_ = {item: this.item, index: this.index};
        this.updateComponentItem(data_);
      }else{
         let data_ = {}
        data_[this.comAttr] = this.item
        this.updateCurrentComponentData(data_);
      }
    },
    onShowVideoPop() {
      let params = {item: MEDIAS.video, type:MEDIAS.video.type,  index: this.index, picAttr:this.picAttr, comAttr:this.comAttr, event: this.event};
      // let params = _.merge(MEDIAS.video, {index: this.index});
      this.setMediaPop(params);
    },
    onDelete(){
      //在lists时index会传过来，否者就是默认值-1，
      if(this.index >= 0){
        let data_ = {item: {url:""}, index: this.index};
        this.updateComponentItem(data_);
      }else{
        let data_ = {}
        data_[this.comAttr] = {url:""}
        this.updateCurrentComponentData(data_);
      }
      // EventBus.$emit("videoPoster");
    }
  },
};
</script>
<style lang="scss" scope>
.add-video-con {
  font-size: 14px;

  .display-video-con {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 268px;
    height: 180px;
    border: 1px dotted #a5afbe;
    font-size: 30px;
    position: relative;
    .mask{
      position: absolute;
      width: inherit;
      height: inherit;
      background-color: rgba(255, 255, 255, 0.01)
    }
    .btns-con{
      position: absolute;
      top: 0;
      right: 0;  
      z-index: 100;
      .btn-delete, .btn-crop{
        margin-left: 1px;
        border-radius: 0;
      }  
    }
  }
  .btn-add-video-con {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 268px;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .info{
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    padding: 4px;
    font-size: 14px;

  }

  .video-con{
    width: 270px;
    height: 180px;

    .video-player{
      height: inherit;
    }
  }
}
</style>


